<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsonData</title>
<style type="text/css">

#btnMap,#btnArray,#btnMA{

	font-family: '돋움';
	font-size: 12pt;
	font-weight: bold;
	
	
	border: 2px solid #2299dd;
	border-radius:10px;
	background-color: #ffeeff;
	height:30px;
	width:100px;
}

#result{
	font-size: 12pt;
	
	border: 2px solid #2299dd;
	height:100%;
	width:255px;
	margin-top: 10px;
	background-color: #ffeeff;
	border-radius:10px 10px 50px 30px;
	box-shadow : 4px 6px 10px #bbbbbb;
	padding:10px 25px 10px 25px;

}


</style>

<script>
var rs;
var data;

function init(){
	var btnM = document.querySelector('#btnMap');
	var btnA= document.querySelector('#btnArray');
	var btnMA= document.querySelector('#btnMA');
	rs=document.querySelector('#result');

	
	btnMap.onclick= function(){
		
		
		//데이터 구조를 map 형태로 만들어 제어
		data={apple:'사과',banana:'바나나', melon:'메론', watermelon:'수박'};
		
		rs.innerHTML = "<li>Apple : " + data.apple;
		rs.innerHTML += "<li>Banana : " + data.banana;
		rs.innerHTML += "<li>Melon : " + data['melon'];
		rs.innerHTML += "<li>WaterMelon : " +data['watermelon'];
	}
	btnArray.onclick= function(){
		data=['백두산','설악산','한라산','지리산'];
		rs.innerHTML='';
		for(i=0;i<data.length;i++){
			rs.innerHTML += "<li>" +data[i];
		}
		
	}
	
	btnMA.onclick= function(){
		data={apple:'사과',banana:'바나나', melon:'메론', watermelon:'수박',
		mnt:['백두산','설악산','한라산','지리산']};
		rs.innerHTML ="<h3>과일 이름! </h3>";
		
		rs.innerHTML += "<li>Apple : " + data.apple;
		rs.innerHTML += "<li>Banana : " + data.banana;
		rs.innerHTML += "<li>Melon : " + data['melon'];
		rs.innerHTML += "<li>WaterMelon : " +data['watermelon'];
		
		rs.innerHTML +="<h3>산 이름!</h3>"
		
		for(i=0;i<data.mnt.length;i++){
			rs.innerHTML += "<li>" +data.mnt[i];
		
		}
	}
	
}


</script>


</head>
<body>
<input type='button' value='MAP' id='btnMap'>
<input type='button' value='Array' id='btnArray'>
<input type='button' value='Map+Array' id='btnMA'>
<div id='result'></div>

<script> init();</script>

</body>
</html>